<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Tooltip from "./Tooltip.svelte";
    import { fn } from "storybook/test";
    import type { TooltipProps } from "./Tooltip";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import { BothSide } from "../BothSide";

    /**
     * Tooltip 文字提示
     */
    const { Story } = defineMeta({
        title: "Components/Base/Tooltip",
        component: Tooltip,
        tags: ["autodocs"],
        argTypes: {
            align: {
                control: { type: "select" },
                options: ["top", "bottom", "left", "right", "topLeft", "topRight", "bottomLeft", "bottomRight", "leftTop", "leftBottom", "rightTop", "rightBottom"],
            },
            trigger: {
                control: { type: "select" },
                options: ["hover", "click", "focus"],
            },
            disabled: {
                control: { type: "boolean" },
            },
            arrow: {
                control: { type: "boolean" },
            },
            hideDelay: {
                control: { type: "number" },
            },
            content: {
                table: {
                    type: { summary: "string | Snippet" },
                },
            },
            contentStyle: {
                control: { type: "text" },
            },
            visible: {
                control: { type: "boolean" },
            },
            theme: {
                control: { type: "select" },
                options: [
                    "light",
                    "primary",
                    "success",
                    "info",
                    "warning",
                    "error",
                    "blue",
                    "green",
                    "red",
                    "yellow",
                    "pink",
                    "magenta",
                    "volcano",
                    "orange",
                    "gold",
                    "lime",
                    "cyan",
                    "geekblue",
                    "purple",
                ],
                table: {
                    type: {
                        summary:
                            "string | light | primary | success | info | warning | error | blue | green | red | yellow | pink | magenta | volcano | orange | gold | lime | cyan | geekblue | purple",
                    },
                },
            },
            cancelText: {
                control: { type: "text" },
            },
            cancelType: {
                control: { type: "select" },
                options: ["primary", "secondary", "tertiary", "success", "error", "danger", "warning", "default"],
            },
            offset: {
                control: { type: "number" },
            },
            arrowPointAtCenter: {
                control: { type: "boolean" },
            },
        },
        args: {},
    });

    const style = "width: 120px; text-align: center";
</script>

<Story name="Default">
    {#snippet template(args)}
        <Tooltip content="Tip Content"><span>hover</span></Tooltip>
    {/snippet}
</Story>

<Story name="MultilineContent">
    {#snippet template(args)}
        {#snippet tipContent()}
            <div style="font-size: 12px;">
                <p>风吹柳花满店香，吴姬压酒唤客尝。</p>
                <p>金陵子弟来相送，欲行不行各尽觞。</p>
                <p>请君试问东流水，别意与之谁短长？</p>
            </div>
        {/snippet}
        <div style="margin-top: 50px;"></div>
        <Tooltip content={tipContent} align="right"><span>show tips</span></Tooltip>
    {/snippet}
</Story>

<Story name="Align">
    {#snippet template(args)}
        <Space justify="center">
            <Space dir="v" style="width: 500px">
                <Space dir="h" align="center" justify="center" size={30}>
                    <Tooltip content="Content" align="topLeft">
                        <Button {style}>Top Left</Button>
                    </Tooltip>
                    <Tooltip content="Content" align="top">
                        <Button {style}>Top Center</Button>
                    </Tooltip>
                    <Tooltip content="Content" align="topRight">
                        <Button {style}>Top Right</Button>
                    </Tooltip>
                </Space>
                <BothSide>
                    <Space dir="v">
                        <Tooltip content="Content" align="leftTop">
                            <Button>Left Top</Button>
                        </Tooltip>
                        <Tooltip content="Content" align="left">
                            <Button>Left Center</Button>
                        </Tooltip>
                        <Tooltip content="Content" align="leftBottom">
                            <Button>Left Bottom</Button>
                        </Tooltip>
                    </Space>
                    <Space dir="v">
                        <Tooltip content="Content" align="rightTop">
                            <Button>Right Top</Button>
                        </Tooltip>
                        <Tooltip content="Content" align="right">
                            <Button>Right Center</Button>
                        </Tooltip>
                        <Tooltip content="Content" align="rightBottom">
                            <Button>Right Bottom</Button>
                        </Tooltip>
                    </Space>
                </BothSide>
                <Space dir="h" align="center" justify="center" size={30}>
                    <Tooltip content="Content" align="bottomLeft">
                        <Button {style}>Bottom Left</Button>
                    </Tooltip>
                    <Tooltip content="Content" align="bottom">
                        <Button {style}>Bottom Center</Button>
                    </Tooltip>
                    <Tooltip content="Content" align="bottomRight">
                        <Button {style}>Bottom Right</Button>
                    </Tooltip>
                </Space>
            </Space>
        </Space>
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Tooltip content="Tip Content" {...args}><span>disabled tooltip</span></Tooltip>
    {/snippet}
</Story>

<Story name="ArrowCenter">
    {#snippet template(args)}
        <Space justify="center">
            <Space dir="v" style="width: 500px">
                <Space dir="h" align="center" justify="center" size={30}>
                    <Tooltip content="Content" arrowPointAtCenter align="topLeft">
                        <Button {style}>Top Left</Button>
                    </Tooltip>
                    <Tooltip content="Content" arrowPointAtCenter align="top">
                        <Button {style}>Top Center</Button>
                    </Tooltip>
                    <Tooltip content="Content" arrowPointAtCenter align="topRight">
                        <Button {style}>Top Right</Button>
                    </Tooltip>
                </Space>
                <BothSide>
                    <Space dir="v">
                        <Tooltip content="Content" arrowPointAtCenter align="leftTop">
                            <Button>Left Top</Button>
                        </Tooltip>
                        <Tooltip content="Content" arrowPointAtCenter align="left">
                            <Button>Left Center</Button>
                        </Tooltip>
                        <Tooltip content="Content" arrowPointAtCenter align="leftBottom">
                            <Button>Left Bottom</Button>
                        </Tooltip>
                    </Space>
                    <Space dir="v">
                        <Tooltip content="Content" arrowPointAtCenter align="rightTop">
                            <Button>Right Top</Button>
                        </Tooltip>
                        <Tooltip content="Content" arrowPointAtCenter align="right">
                            <Button>Right Center</Button>
                        </Tooltip>
                        <Tooltip content="Content" arrowPointAtCenter align="rightBottom">
                            <Button>Right Bottom</Button>
                        </Tooltip>
                    </Space>
                </BothSide>
                <Space dir="h" align="center" justify="center" size={30}>
                    <Tooltip content="Content" arrowPointAtCenter align="bottomLeft">
                        <Button {style}>Bottom Left</Button>
                    </Tooltip>
                    <Tooltip content="Content" arrowPointAtCenter align="bottom">
                        <Button {style}>Bottom Center</Button>
                    </Tooltip>
                    <Tooltip content="Content" arrowPointAtCenter align="bottomRight">
                        <Button {style}>Bottom Right</Button>
                    </Tooltip>
                </Space>
            </Space>
        </Space>
    {/snippet}
</Story>

<Story name="Theme">
    {#snippet template(args)}
        <Space dir="v" size={24}>
            <Space wrap>
                {#each ["light", "primary", "success", "info", "warning", "error", "blue", "green", "red", "yellow", "magenta", "pink", "volcano", "orange", "gold", "lime", "cyan", "geekblue", "purple"] as color}
                    <Tooltip align="top" theme={color} arrow content={color}>
                        <Button>{color}</Button>
                    </Tooltip>
                {/each}
            </Space>

            <Space>
                {#each ["#f50", "#2db7f5", "#87d068", "#108ee9"] as color}
                    <Tooltip align="top" trigger="click" theme={color} arrow content={color}>
                        <Button>{color}</Button>
                    </Tooltip>
                {/each}
            </Space>
        </Space>
    {/snippet}
</Story>
